<template>
	<view class="mycollect">
		<u-navbar
			back-text=" "
			:is-back="false"
			:border-bottom="false"
			:background="{
				background: '#F7F7F8'
			}"
		>
			<view class="slot-wrap u-flex u-col-center">
				<u-icon name="arrow-left" color="#101010" :size="48" @click="goback"></u-icon>
				<u-icon name="trash" color="#101010" :size="36" style="margin-left: 15rpx;" @click="doDelCollection"></u-icon>
			</view>
		</u-navbar>
		<view class="main">
			<view class="goodsbox" v-if="collectList.length > 0">
				<u-checkbox-group @change="checkboxGroupChange" :size="44" :icon-size="44">
					<u-checkbox v-model="item.checked" shape="circle" :label-disabled="true" v-for="(item, index) in collectList" :key="index" :name="item.skuId">
						<view class="item" @click="goNext(item)">
							<view class="left"><image :src="item.imageInfo.imageList[0].url" mode="aspectFill"></image></view>
							<view class="content">
								<view class="title u-line-2">
									<text class="cos" v-if="item.owner === 'g'">JD</text>
									{{ item.skuName }}
								</view>
								<view class="type u-line-1 gray u-flex u-row-between u-col-center">
									<view class="">
										京东价
										<text>￥{{ item.priceInfo.price }}</text>
									</view>
									<view class="">
										<text class="black">{{ item.comments | numberFormat }}</text>
										条评论 好评率
										<text class="black">{{ item.goodCommentsShare }}%</text>
									</view>
								</view>
								<view class="earn u-flex u-row-between u-col-center">
									<view class="coupon" v-if="item.couponInfo.couponList.length > 0">优惠券 ￥{{ item.couponInfo.couponList[0].discount }}</view>
									<view class="coupon" style="width: 230rpx;" v-if="islogin">购买返赚 ￥{{ item.commissionInfo.couponCommission.toFixed(2) }}</view>
								</view>
								<view class="bot u-flex u-row-between u-col-center">
									<view class="price" style="white-space:nowrap;">
										券后价：￥
										<text class="bold">{{ item.priceInfo.lowestCouponPrice }}</text>
									</view>
									<view
										class=""
										style="white-space:nowrap;height: 50rpx;line-height: 50rpx; border-radius: 40rpx;background-color: #fa3534;color: #FFFFFF;padding:0 16rpx;"
									>
										分享赚￥
										{{ item.commissionInfo.share_commission === 0 ? item.commissionInfo.share_commission : item.commissionInfo.share_commission.toFixed(2) }}
									</view>
									<!-- <u-button type="error" shape="circle" size="mini">马上抢</u-button> -->
								</view>
							</view>
						</view>
						<u-line color="#E9E9E9"></u-line>
					</u-checkbox>
				</u-checkbox-group>
				<view class="bots u-flex u-row-between u-col-center">
					<u-checkbox-group :size="44" :icon-size="44"><u-checkbox v-model="allcheck" shape="circle">全选</u-checkbox></u-checkbox-group>
					<button type="default" class="u-reset-button" open-type="share" :disabled="isdisabled">
						<view class="sharewx u-flex u-row-center u-col-center">
							<u-icon name="weixin-fill" color="#621E00" :size="40"></u-icon>
							<text style="color:#621E00;font-size: 30rpx;margin-left: 40rpx;">分享到微信群</text>
						</view>
					</button>
				</view>
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">暂无收藏商品</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'mycollect',
	data() {
		return {
			islogin: false,
			isdisabled: true,
			scrollTop: 0,
			allcheck: false,
			chooseList: [],
			skuidList: [],
			skuIds: '',
			skuId: '',
			collectList: [
				// {
				// 	checked: false,
				// 	brandCode: '27776',
				// 	brandName: '三只松鼠（Three Squirrels）',
				// 	categoryInfo: {
				// 		cid1: 1320,
				// 		cid1Name: '食品饮料',
				// 		cid2: 1583,
				// 		cid2Name: '休闲食品',
				// 		cid3: 1591,
				// 		cid3Name: '坚果炒货'
				// 	},
				// 	comments: 310681,
				// 	commissionInfo: {
				// 		commission: 13.95,
				// 		commissionShare: 15,
				// 		couponCommission: 7.35,
				// 		endTime: 1612108799000,
				// 		isLock: 0,
				// 		plusCommissionShare: 15,
				// 		startTime: 1606147200000
				// 	},
				// 	couponInfo: {
				// 		couponList: [
				// 			{
				// 				bindType: 1,
				// 				discount: 44,
				// 				getEndTime: 1610294399000,
				// 				getStartTime: 1608912000000,
				// 				hotValue: 2,
				// 				isBest: 1,
				// 				link:
				// 					'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoePEGic4DrY8VI98PfvSMOlIP4lc-rNzQshHM9M5Fy80wqo3R-LQLD71GmJt6fZEI5s95TPg',
				// 				platformType: 0,
				// 				quota: 90,
				// 				useEndTime: 1610294399000,
				// 				useStartTime: 1608912000000
				// 			}
				// 		]
				// 	},
				// 	deliveryType: 1,
				// 	forbidTypes: [0],
				// 	goodCommentsShare: 96,
				// 	imageInfo: {
				// 		imageList: [
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/145529/8/19985/175283/5fe59269Ebc0113d9/c58c66ad0817dd1f.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/155012/17/11429/149876/5fe59268E798151a8/992a7d28f7d3931e.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/144595/3/20174/106513/5fe59268E1de6fb20/df8b76682968782a.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/155323/16/11396/86067/5fe59269Ec849b287/8d9f6bb95984423b.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/153072/20/11523/139647/5fe59269E15833814/f0f0ce9f3f47c44c.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/143075/12/19926/132105/5fe59269E101a6fdc/c948d2638ca3a7cf.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/156740/38/1974/146727/5fe59269Ebf75ce3a/b6adbb0114b91e48.jpg' }
				// 		],
				// 		whiteImage: 'https://img14.360buyimg.com/pop/jfs/t1/146185/24/20021/738697/5fe59297Ea920a957/4226c09dd878e4a7.png'
				// 	},
				// 	inOrderCount30Days: 17417,
				// 	inOrderCount30DaysSku: 17417,
				// 	isHot: 1,
				// 	materialUrl: 'item.jd.com/100010595494.html',
				// 	owner: 'g',
				// 	pinGouInfo: [],
				// 	priceInfo: { lowestCouponPrice: 49, lowestPrice: 93, lowestPriceType: 1, price: 93 },
				// 	resourceInfo: { eliteId: 31, eliteName: '今日必推' },
				// 	shopInfo: { shopId: 1000015268, shopLabel: '0', shopLevel: 4.9, shopName: '三只松鼠京东自营旗舰店' },
				// 	skuId: 100010595494,
				// 	skuName: '三只松鼠_ _坚果大礼包1515g',
				// 	spuid: 100010595494
				// }
			]
		};
	},
	watch: {
		'chooseList.length': function(val) {
			// console.log('111111111111',val);

			if (val === this.collectList.length) {
				this.allcheck = true;
			}
			if (val === 0) {
				this.allcheck = false;
			}
			if (val === 1) {
				this.isdisabled = false;
			} else {
				this.isdisabled = true;
			}
		},
		allcheck: function(val) {
			console.log(val);
			if (val === true) {
				this.collectList.map(val => {
					val.checked = true;
					if (this.chooseList.indexOf(val.skuId) === -1) {
						this.chooseList.push(val.skuId);
					}
				});
				// console.log('chooseList',this.chooseList)
			} else {
				this.collectList.map(val => {
					val.checked = false;
					this.chooseList.length = 0;
				});
			}
		}
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getCollectionList();
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	onShareAppMessage(e) {
		// if (this.chooseList.length === 0) {
		// 	this.$refs.uToast.show({
		// 		title: '请选择一个商品进行分享!',
		// 		type: 'warning'
		// 	});
		// }
		// if (this.chooseList.length === 1) {
		console.log(this.chooseList);
		let item = {};
		for (var i = 0; i < this.collectList.length; i++) {
			if (this.collectList[i].skuId === this.chooseList[0]) {
				item = this.collectList[i];
			}
		}
		console.log(item);
		item.my_code = uni.getStorageInfoSync('jxuser').my_code;
		return {
			title: item.skuName,
			path: '/pages/other/goodsInfo/goodsInfo?item=' + encodeURIComponent(JSON.stringify(item)),
			imageUrl: item.imageInfo.imageList[0].url
		};
		// } else {
		// 	this.$refs.uToast.show({
		// 		title: '分享到微信群仅可选择一个商品!',
		// 		type: 'warning'
		// 	});
		// }
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		this.islogin = uni.getStorageSync('token') ? true : false;
	},
	//前台进入后台
	onHide() {},
	methods: {
		// numberFormat(value) {
		// 	var param = {};
		// 	var k = 10000,
		// 		sizes = ['', 'w+', 'E+', 'EE+'],
		// 		i;
		// 	if (value < k) {
		// 		param.value = value;
		// 		param.unit = '';
		// 	} else {
		// 		i = Math.floor(Math.log(value) / Math.log(k));

		// 		param.value = (value / Math.pow(k, i)).toFixed(1);
		// 		param.unit = sizes[i];
		// 	}
		// 	return param.value + param.unit;
		// },
		goback() {
			uni.navigateBack({
				delta: 1
			});
		},
		doDelCollection() {
			for (var i = 0; i < this.chooseList.length; i++) {
				if (i === this.chooseList.length - 1) {
					this.skuId += this.chooseList[i];
				} else {
					this.skuId += this.chooseList[i] + ',';
				}
			}
			this.$u.api
				.doDelCollection({
					skuId: this.skuId
				})
				.then(res => {
					console.log(res);
					this.$refs.uToast.show({
						title: '删除成功!',
						type: 'success'
					});
					this.getCollectionList();
				})
				.catch(err => {
					console.log(err);
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		},
		getGoodsInfo() {
			let that = this;
			this.$u.api
				.doSearchGoods({
					skuIds: this.skuIds,
					fields: 'skuLabelInfo',
					user_id: uni.getStorageSync('jxuser').id
				})
				.then(res => {
					res.data.map(val => {
						val.checked = false;
						// val.comments = that.numberFormat(val.comments);
					});
					this.collectList = res.data;
					console.log('收藏列表', this.collectList);
				})
				.catch(err => {
					console.log(err);
				});
		},
		getCollectionList() {
			this.$u.api
				.getCollectionList()
				.then(res => {
					// console.log(res);
					this.skuidList = res.data;
					for (var i = 0; i < this.skuidList.length; i++) {
						if (i === this.skuidList.length - 1) {
							this.skuIds += this.skuidList[i].skuid;
						} else {
							this.skuIds += this.skuidList[i].skuid + ',';
						}
					}
					// this.skuIds = this.skuidList.splice(',');
					console.log(this.skuIds);
					this.getGoodsInfo();
				})
				.catch(err => {
					console.log(err);
				});
		},
		goNext(item) {
			uni.navigateTo({
				url: '/pages/other/goodsInfo/goodsInfo?item=' + encodeURIComponent(JSON.stringify(item)),
				animationType: 'pop-in',
				animationDuration: 300
			});
		},
		checkboxGroupChange(e) {
			console.log(e);
			this.chooseList = e;
			console.log(e, this.chooseList);
		}
	}
};
</script>

<style lang="scss" scoped>
.mycollect {
	.main {
		.goodsbox {
			padding: 34rpx 14rpx;
			padding-bottom: 180rpx;
			.item {
				display: flex;
				// padding: 20rpx;
				// background-color: #ffffff;
				margin-top: 20rpx;
				.left {
					margin-right: 13rpx;
					image {
						width: 230rpx;
						height: 250rpx;
						border-radius: 12rpx;
					}
				}
				.content {
					// width: 382rpx ;
					.title {
						font-size: 28rpx;
						line-height: 50rpx;
						.cos {
							// width: 56rpx;
							// height: 34rpx;
							color: #ffffff;
							font-weight: 200;
							font-size: 28rpx;
							text-align: center;
							padding: 0 12rpx;
							background-color: #ff0303;
							border-radius: 8rpx;
							margin-right: 6rpx;
						}
					}
					.type {
						margin: 10rpx 0;
						font-size: 24rpx;
					}
					.earn {
						margin: 10rpx 0;
						.coupon {
							width: 180rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #ff0303;
							text-align: center;
							background-color: #ffe5e5;
							border-radius: 50rpx;
							font-size: 24rpx;
						}
					}
					.bot {
						// margin-top: 24rpx;
						.price {
							// width: 226rpx;
							color: #ff0303;
						}
					}
				}
			}
		}
		.nodata {
			margin-top: 438rpx;
		}
		.bots {
			width: 100%;
			z-index: 9999;
			padding-top: 20rpx;
			padding-left: 22rpx;
			padding-right: 22rpx;
			padding-bottom: 22rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #ffffff;
			.sharewx {
				width: 516rpx;
				height: 66rpx;
				background-color: #fcae8e;
				border-radius: 40rpx;
			}
		}
	}
}
</style>
